<%--=========================================================================== 
This is the page directive. Sets the content type and encoding.
Encoding of the response: UTF-8
Encoding of this JSP page: Cp1251 
===========================================================================--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="Cp1251"%>
<%@ taglib uri="/WEB-INF/st4" prefix="st"%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Destination</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles/st4.css" />

<script type="text/javascript" src="js/jQuery.js"></script>

<script type="text/javascript"> 
	function getEmptySits(id){
		var request="ajax?command=ajax_get_empty_sits";
		var params_ticket=jQuery('#ticket_select').serialize();
		jQuery.ajax ({
			url:  request+"&"+params_ticket,
			dataType : 'html',
			success: function (data, textStatus) { 
				$("#"+id).html(data);
				$("#next_button").css("display","block");
				$("#next_button").html("<st:i18n key="button.next"/>");
			},
			error: function (msg) {
				console.log("Error:"+msg);
				$("#next_button").html("");
			}
		});
		getPrice();
	}
	
	function getPrice(){
		var request="ajax?command=ajax_get_price";
		var params_service=jQuery('#service_select').serialize();
		var params_ticket=jQuery('#ticket_select').serialize();
		jQuery.ajax ({
			url: request+"&"+params_service+"&"+params_ticket, 
			dataType : 'html',
			success: function (data, textStatus) { 
				$("#price").html(data);
			}, 
			error: function (msg) { 
				console.log("Error:"+msg);
				$("#price").html('Error calculating the price');
			}
		});
	}
	
	function sendData(){
		var request="controller?command=create_ticket";
		var params_service=jQuery('#service_select').serialize();
		var params=jQuery('#ticket_select').serialize();
		window.location.href = request+"&"+params+"&"+params_service;
	}
</script>

</head>
<body>
	<table class="page">
		<%--========================================================================--%>
		<jsp:include page="/WEB-INF/includes/header.jsp" />
		<jsp:include page="/WEB-INF/includes/menu.jsp" />
		<%--========================================================================--%>

		<tr class="content">
			<td><c:if test="${param.direction==1}">
					<h2 align="center"><st:i18n key="pages.select_direct_flight"/></h2>
				</c:if> <c:if test="${param.direction==2}">
					<h2 align="center"><st:i18n key="pages.select_return_flight"/></h2>
				</c:if>

				<div class="price_field">
					<div id="next_button" onclick="sendData();"></div>
					<div class="price"><st:i18n key="phrases.your_price"/>: <span id="price"> 0 $</span></div>
				</div>

				<div>
					<form id="service_select">
						<table class="services_table">
							<tr style="text-align: center;">
								<td width="275px"><st:i18n key="additional_services.titles.name" /></td>
								<td width="80px"><st:i18n key="additional_services.titles.price" /></td>
								<td></td>
							</tr>

							<c:forEach items="${additionalServices}" var="service">
								<tr>
									<td><st:i18n key="additional_services.id_${service.id}" /></td>
									<td style="text-align: center;">${service.price}$</td>
									<td><input type="checkbox" name="service_${service.id}"
										value="${service.id}_${service.price}" onchange="getPrice();" /></td>
								</tr>
							</c:forEach>
						</table>
					</form>
				</div>	

<c:forEach items="${items}" var="elem" varStatus="varStatus">
element is ${elem} at index ${varStatus.index}
</c:forEach>

				<div class="flights_container">
					<form id="ticket_select">
						<input type="hidden" name="direction" value="${param.direction}">
						<c:if test="${param.direction==1}">
							<c:forEach items="${directFlights}" var="item" varStatus="varStatus">
								<div class="flights_list" style="width: 510px; float: left;">
									<div style="width: 465px; float: right;"><b>
										<st:i18n key="pages.Route" /> ${varStatus.index+1}:</b> <br/>
										<st:i18n key="pages.Duration"/>: ${item.getDuration()}  <br/>
										<st:i18n key="pages.Number_of_transfers"/>: ${item.flights.size()-1} <br/> 
										<st:i18n key="pages.Price"/>: ${item.getPrice()} $</div> <br/>
									<div style="width: 30px; float: left;">
										<input type="radio" name="route" value="${varStatus.index}" onclick="getEmptySits(${varStatus.index});"/>
									</div>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<st:i18n key="pages.Flights"/>:
									<c:forEach items="${item.flights}" var="flght">
									<div style="width: 465px; float: right;">
										&nbsp;&nbsp;${flght.getDescription()}
										<b> <st:i18n key="pages.Aircraft"/>: </b>
										${flght.getSchedule().getAirplane()} 
									</div>
									</c:forEach>
									<span class="red" id="${varStatus.index}"></span>
								</div>
							</c:forEach>
						</c:if>

						<c:if test="${param.direction==2}">
							<c:forEach items="${directFlights}" var="item" varStatus="varStatus">
								<div class="flights_list" style="width: 510px; float: left;">
									<div style="width: 465px; float: right;"><b>
										<st:i18n key="pages.Route" /> ${varStatus.index+1}:</b> <br/>
										<st:i18n key="pages.Duration"/>: ${item.getDuration()}  <br/>
										<st:i18n key="pages.Number_of_transfers"/>: ${item.flights.size()-1} <br/> 
										<st:i18n key="pages.Price"/>: ${item.getPrice()} $</div> <br/>
									<div style="width: 30px; float: left;">
										<input type="radio" name="route" value="${varStatus.index}" onclick="getEmptySits(${varStatus.index});"/>
									</div>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<st:i18n key="pages.Flights"/>:
									<c:forEach items="${item.flights}" var="flght">
									<div style="width: 465px; float: right;">
										&nbsp;&nbsp;${flght.getDescription()}
										<b> <st:i18n key="pages.Aircraft"/>: </b>
										${flght.getSchedule().getAirplane()} 
									</div>
									</c:forEach>
									<span class="red" id="${varStatus.index}"></span>
								</div>
							</c:forEach>
						</c:if>
					</form>
				</div></td>
		</tr>
		<%--========================================================================--%>
		<jsp:include page="/WEB-INF/includes/footer.jsp" />
		<%--========================================================================--%>
	</table>
</body>
</html>